<!-- 采购订单列表 -->
<template>
  <div class="purchase-order-box all-list-box"  @touchstart="touchStart($event)" @touchend="touchEnd($event)">  
    <!-- <div class="filter-top"> 
      <div class="search-box">
          <search v-model="searchText"
              position= "relative"
              placeholder="请输入订单号"
              ref="search">
          </search>    
      </div>
      <div class="iconfont iconshaixuan"  @click="showFilter = true"></div> 
    </div>  -->
    <div class="filter-top" @click="showFilter = true"> 
      请选择筛选条件 <div class="isclick"></div> 
    </div>
     <div class="top-scroll-box">
      <div scroll-x="true"  class="top-scroll">
        <div class="scroll-content-box">
          <div :class="['type-item',orderTypeIdx == index ? 'active-type' : '']" v-for="(item,index) in orderTypeList" :key="index" @click="active_this(index)">
            {{item.name}}
          </div>
        </div>
      </div>
    </div>

    <div v-for="(item,index) in orderList" :key="index" class="order-item" @click="goOrderDetail(item.replOrderId)">
       <div class="order-header">
           <div class="order-numer"><span class="marr12">订单号:</span>{{item.orderSn}}</div>
           <div :class="['order-status', 'order-status'+item.status]">{{item.statusText}}</div>
       </div>
        <div class="order-content">
            <div class="order-line">
                <div class="order-line-item"><span>下单人:</span>{{item.userName}}</div>
                <div class="order-line-item"><span>商品数量:</span>￥{{item.goodsNum}}</div>
            </div>
            <div class="order-line margin-top20">
                <div class="order-line-item"><span>日期:</span>{{item.addTime}}</div> 
            </div> 
        </div>
        <div class="opt-box">
            <div class="isbtn urge-btn" v-if="item.status==1"   @click.stop="confirmOrder(item.replOrderId,index)">确认收货</div>
        </div>
    </div>
    <nodata v-if="!orderList || orderList.length==0" />
    <div class="height120"></div>
    <!-- <div class="addbtn isbtn" @click="addOrder">采购下单</div> --> 
    <!--  下拉筛选 -->
    <top-filter :showFilter.sync="showFilter">
      <div class="filter-content" @click.stop>
        <group>
          <datetime v-model="starTime" :end-date="defult_endTime" title="开始时间"></datetime>
        </group> 
        <group>
          <datetime v-model="endTime" :end-date="defult_endTime" title="结束时间"></datetime>
        </group>  
        <div class="btn-box">
          <div class="reset btn" @click="reset">重置</div>
          <div class="confirm btn" @click="confirmSelect">确认</div>
        </div>
      </div>
    </top-filter>
    <!-- 下拉筛选end -->

  </div>

</template>

<script>
import row from '@/components/row'
import topFilter from '@/components/topFilter'
import api from '@/api/api.js' 
import nodata from '@/components/nodata'
import { Group, PopupPicker,XDialog,Search,Datetime } from 'vux'
import { Message } from 'element-ui'
import util from '@/utils/util.js'
export default { 
  components: {
    row,
    topFilter,
    Search,
    nodata,
    XDialog,
    Group, 
    PopupPicker,
    Datetime
  },
  data () {
    return {
      orderTypeIdx:0,
      // 100待确认 101待付款 102 用户取消 201 已付款 202：支付失败 300：待发货 301：已发货 401用户收货
      // 1：待确认 2：待付款  3待发货  4：待收货  5：已完成  6：已取消
      orderTypeList:[ 
        { name:'补货中',status:1 }, 
        { name:'已完成',status:2 }, 
      ],
      filterObj:{
        pageSize: 10,
        pageNum:1,
        totalPage:0,
      },
      defult_endTime:'',
      starTime:'',
      endTime: '',
      showFilter:false,
      cityList:[ JSON.parse(sessionStorage.cityList  || '[]' )],
      searchText:'',
      city:[], 
      orderList:[ ]
    }
  },
  created(){
    this.getAmouthDay();
  },
  mounted () {
    this.filterObj.pageNum=1;
    
    this.getList()
  },
  filters: {
     
  },
  methods: {
    getList(){
      let data={
        pageNum:this.filterObj.pageNum,
        pageSize:this.filterObj.pageSize
      }
      if(this.orderTypeList[this.orderTypeIdx].status){
        data.status = this.orderTypeList[this.orderTypeIdx].status
      }
      this.isLoading=true;
      if(this.starTime){
        data.startTime = this.startTime;
      }
      if(this.endTime){
        data.endTime = this.endTime;
      }
      api.warehouseOrderMng.warehouseOrderList(data,res=>{
        this.isLoading=false;
        this.filterObj.totalPage = res.result.totalPage;
        this.orderList = data.pageNum==1? res.result.data:this.orderList .concat(res.result.data);
      }) 
    },
    confirmSelect(){
      this.filterObj.pageNum = 1; 
      this.getList();
      this.showFilter = false;
    },
    // 筛选默认最近一个月
    getAmouthDay(){ 
      let today= new Date();
      let mounth_ago =  new Date(today.getTime()-(30*24*60*60*1000)); 
      this.starTime = util.timeTampt(mounth_ago);
      this.endTime= util.timeTampt(today); 
      this.defult_endTime = util.timeTampt(today); 
    },
    //重置筛选
    reset(){
       this.getAmouthDay();
    },
    confirmOrder(id,index){
      api.warehouseOrderMng.replOrderConfirm({
        orderId:id
      },res=>{
        this.filterObj.pageNum = 1;
        this.getList();
        return  Message({
          message: "更新成功",
          type: 'success',
          duration: 1 * 1000
        })
       
      }) 
    },
    getDetail(id,index){

      api.warehouseOrderMng.replOrderDetail({
          orderId:id
      },res=>{
            this.orderList[index] = res.result.orderInfo;
      }) 
    },
    filterShow(){
      this.showFilter = !this.showFilter
    },
    confirmSelect(){
      this.pageNum = 1;
      this.getData();
    },
    touchStart(e) {
        this.startY = e.targetTouches[0].pageY;
        this.startX = e.targetTouches[0].pageX;  
    },
    scrollToEnd(e) {
        let scrollHeight = this.$el.scrollHeight; 
        let clientHeight = this.$el.clientHeight; 
        let scrollTop = this.$el.scrollTop;   
        if (scrollTop + clientHeight >= scrollHeight -60) { //下拉到底了 
          this.doLoadMore()  
        } 
    },
    touchEnd(e) {
      if (this.isLoading) {
          return;
      }
      let endX = e.changedTouches[0].pageX,
          endY = e.changedTouches[0].pageY,
          dy = this.startY - endY,
          dx = endX - this.startX;
      if(Math.abs(dx) < 2 && Math.abs(dy) < 2) {
          return;
      }
      if (endY < this.startY) {
          this.scrollToEnd(e)
      }
    },
    doLoadMore() {  
        if(this.filterObj.pageNum < this.filterObj.totalPage){ 
          ++this.filterObj.pageNum;
          this.getList()
        }
        return 
    },
    active_this(idx){
      if(this.orderTypeIdx==idx){
        return
      }
      this.orderTypeIdx=idx;
      this.getList();
    },
    addOrder(){
        this.$router.push("/addOrder")
    },
    goOrderDetail(id){
        this.$router.push({path:"/warehouseOrderDetail", query:{id:id}})
    }
  }
}
</script>
<style lang="less" scoped>

.top-scroll-box{ 
   height: 40px;
  position: fixed;
  background: #f7f7f7;
  z-index: 3;
  left: 0;
  top: 44px;
  width: 7.5rem;
}
.top-scroll{ 
  height: .90rem;
  width: 100%;
  border-top: 1px solid #e1e1e1;
  display: flex;
  overflow-x: auto;
}
.type-item{
		height: .90rem;
		line-height: .90rem;
		padding: 0 .20rem;
		font-size: .28rem;
		font-weight: bold;
		color: #999;
		white-space: nowrap;
		position: relative;
	}
	.active-type{
		font-weight: 600;
		color: #333333;	 
	}
	.active-type::before{
		content: '';
		position: absolute; 
		height: .08rem;
		background: linear-gradient(218deg, #FFB600 0%, #FB3030 100%);
		border-radius: .04rem;
		left: .36rem;
		right: .36rem;
		bottom: 0;
  }
.scroll-content-box{
  height: .90rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 .20rem;
}
.opt-box{
		display: flex;
		justify-content: flex-end;
		padding: .12rem;
    border-top: 1px solid #f7f7f7;
	}	
	
	.opt-box .isbtn{
		width: 1.28rem;
		height: .48rem; 
		border-radius: .08rem;
		text-align: center;
		line-height: .48rem;
		margin-left: .12rem;
    
	}
	.urge-btn{
		color: #fff;
		background: linear-gradient(218deg, #FFB600 0%, #FB3030 100%);
	}
	.opt-box .refund-btn{
		color: #FA6400;
		border: 1px solid #FA6400;
		line-height: .46rem;
	}
    .height120{
        height: 60px;
    } 
    .addbtn{
        text-align: center;
        line-height: 50px;
        background: #FABE00;
        color: #fff;
        height: 50px;
        font-size: 16px;
        letter-spacing: 4px;
        position: fixed;
        width: 100%;
        bottom: 0;
        left: 0;
    } 
    .purchase-order-box{
        min-height: 100vh;
        background: #f7f7f7;
        padding-top: 94px;
    }
    .cityName{
        font-size: 16px;
        font-weight: bold;
        height: 30px;
        line-height: 30px;
        padding-left: 16px;
        margin-top: 10px;
    }
    .adrees{
        height: 44px;
        line-height: 44px;
        padding-left: 20px;
        position: relative;
        color: #666;
        &::before{
            content: '';
            position: absolute;
            right: 0;
            left: 12px;
            bottom: 0;
            height: 1px;
            background: #eee;
        }
    }
    .city-choose-name{
        margin-top: 15px;
    }
    .filter-top{
        height: 44px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        border-bottom: 1px solid #eee;
        top: 0;
        left: 0;
        right: 0;
        background: #fff;
        z-index: 3;
        .isclick{
            border-width: 0 1px 1px 0;
            margin-top: -6px;
        }
    }
    .btn-box{
        display: flex;
        width: 100%;
        margin-top: 20px;
        height: 44px;
        justify-content: space-between; 
    .btn{
        border-radius: 8px;
        height: 44px;
        width: 45%;
        line-height: 44px;
        text-align: center;
        color: #fff;
        &:active{
        opacity: .7;
        }
        &.reset{
        background: #ddd;
        }
        &.confirm{
        background: #FABE00;
        }
    }
}
.order-header{
    height: .66rem;
    padding: 0 .24rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    &::before{
        content: '';
        position: absolute;
        right: 0;
        left: .24rem;
        bottom: 0;
        height: 1px;
        background: #f7f7f7;
    }
    .order-numer{
        color: #999;
    }
}
.search-box{
    width: 90%;
}
.iconshaixuan{
    color: #999;
    margin-left: 6px;
    font-size: 18px;
}
/deep/.weui-search-bar__label{
  top: 3px;
}
.filter-content{
  background: #fff;
  width: 100%;
  padding: 20px;
  /deep/.weui-search-bar:before{
    height: 0;
  }
  /deep/.weui-search-bar::after{
    height: 0;
  }
  .row-box{
    margin-bottom: 20px;
  }
  .filter-title{
    padding-top: 20px;

  }
  .data-time-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
/deep/.vux-popup-picker-select{
  text-align: left !important;
}
/deep/.weui-search-bar,.vux-search-fixed{
  position: relative !important;
  padding: 0;
  background: #fff;
}
/deep/.weui-search-bar__cancel-btn{
  text-decoration: none;
}
/deep/.weui-search-bar:after{
  display: none;
}
/deep/.weui-search-bar::before{
  display: none;
}
.order-line{
    display: flex;
    .order-line-item{
        flex: 1;
        span{
            color: #999;
            margin-right: .12rem;
        }
    }
}
.order-content{
    padding: .24rem;
}
.margin-top20{
    margin-top: .20rem;
}
.order-item{
    width: 7.1rem;
    border-radius: .12rem;
    margin: 0 auto .20rem;
    background: #fff;
    box-shadow: 1px 1px 0.24rem 0 rgba(36, 36, 36, 0.05);
}
.order-status100,.order-status101,.order-status300,.order-status1{
    color: chocolate;
}
.order-status201,.order-status401,.order-status301{
    color: darkcyan;
}
.order-status102,.order-status2{
    color: #ccc;
}
.order-status202{
    color: red;
}
.order-status{
    font-weight: bold;
}
.marr12{
    margin-right: .12rem;
}
</style>